<template>
    <Popup
        :show="isShowPopup" position="bottom" round
        @closed="onPopupClosed"
    >
        <div class="container">
            <div class="fe-title">
                <h3>批量上传</h3>
                <img src="@/assets/img/close-popup.png" alt="" @click="onPopupClosed" />
            </div>
            <div class="upload-box">
                <div class="upload-file">
                    <h4>附件</h4><span @click="download">下载模板</span>
                </div>
                <div v-if="fileList&&fileList.length" class="upload-viwe">
                    <img src="@/assets/img/excel@2x.png" />
                    <p class="file-name">
                        {{ fileName }}
                    </p>
                    <img src="@/assets/img/del@2x.png" class="del-icon" @click="clearFile" />
                </div>
                <Uploader :after-read="afterRead" accept=".xlsx">
                    <div class="upload">
                        <img src="@/assets/img/upload@2x.png" />
                        <p>上传文件</p>
                    </div>
                </Uploader>
            </div>
            <div class="btn-container">
                <div class="btn" :class="fileList&&fileList.length?'is-submit-class':''" @click="onSubmitFile">
                    提交
                </div>
                <div class="van-safe-area-bottom"></div>
            </div>
        </div>
    </Popup>
</template>

<script  lang="ts" setup>
import { defineEmits, ref,watch} from 'vue';
import { Popup,Uploader,Dialog } from 'vant';
import {FileModel,FileCityModel} from './topSelecter.module.d';
import { getAddressTemplate,getParseLbsAddress} from '@/api/lbs';
// import {downLoadCommon} from '@/utils/index';
import { downloadFile } from '@/utils/native';
import { copyText, isWx } from '@/utils';

const emits = defineEmits(['confirm','close']);

const props = defineProps({
    showPopup: {
        type: Boolean,
        default: false,
    },
});
const fileList = ref<FileCityModel[]>([]);
const fileName = ref('');
const isShowPopup = ref(false);
const onPopupClosed = ()=>{
    emits('close');
};

const miniHandleShare = (href: string) => {
    copyText(href, () => {
        Dialog.alert({
            title: '资料链接已复制到粘贴板',
            message: href,
        }).then(() => undefined).catch(() => undefined);
    });
};

const download = async()=>{
    const data = await getAddressTemplate() as unknown as string;
    const wxStr = await isWx();
    if (wxStr === 'mini-wx') {
        miniHandleShare(data);
    } else {
        await downloadFile({ url: data , params: { showProgress: true } });
    }
};
const afterRead = async(file:FileModel) => {
    // 此时可以自行将文件上传至服务器
    fileName.value = file.file.name;
    const FormDataFile = new FormData();
    FormDataFile.append('file',file.file);
    const data = await getParseLbsAddress(FormDataFile) as unknown as FileCityModel[];
    fileList.value = data;
};
const clearFile = ()=>{
    fileList.value =[];
    fileName.value ='';
};
const onSubmitFile = ()=>{
    if(fileList.value&&fileList.value.length){
        emits('confirm',fileList.value);
    }

};
watch(
    () => props.showPopup,
    (newVal) => {
        isShowPopup.value = newVal;
        fileList.value =[];
    }
);
</script>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    .fe-title {
        margin-top: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #eee;
        position: relative;
        text-align: center;

        h3 {
            height: 22px;
            // font-family: PingFangSC-SNaNpxibold;
            font-weight: 600;
            font-size: 16px;
            color: #333333;
            text-align: center;
            flex: 1;
        }

        img {
            width: 20px;
            height: 20px;
            position: absolute;
            right: 12px;
            top: 0;
        }
    }
}
.upload-box {
    padding: 12px;

    .upload-file {
        display: flex;
        justify-content: space-between;
        h4 {
            font-weight: 600;
            font-size: 14px;
            color: #333333;
        }
        span {
            font-size: 14px;
            color: #397ff8;
        }
    }
    .upload {
        margin-top: 15px;
        width: 72px;
        height: 72px;
        border: 1px dashed #d2d2d2;
        border-radius: 4px;
        font-size: 12px;
        color: #848484;
        text-align: center;

        img {
            width: 18px;
            height: 18px;
            margin-top: 15px;
        }
    }
    .upload-viwe {
        margin-top: 15px;
        width: 72px;
        height: 72px;
        padding: 2px 0;
        box-sizing: border-box;
        border: 1px solid #d2d2d2;
        border-radius: 4px;
        font-size: 12px;
        color: #848484;
        text-align: center;
        float: left;
        position: relative;
        margin-right: 15px;
        img {
            width: 64px;
            height: 28px;
        }
        .del-icon {
            position: absolute;
            right: -8px;
            top: -8px;
            width: 18px;
            height: 18px;
        }
        .file-name {
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            display: box;
            -webkit-box-orient: vertical;
        }
    }
}
.btn-container {
    padding: 6px 12px;
    .btn {
        width: 351px;
        height: 38px;
        border-radius: 6px;
        text-align: center;
        line-height: 38px;
        color: #fff;
        font-weight: 600;
        font-size: 14px;
        background: rgb(230 0 68 / 60%);
    }
    .is-submit-class {
        background: #e60044;
    }
}

</style>

